<div class="shopmsglist">

    <h1 class="houtai-item-title">新增商品</h1>
    <form>
    <input id="itemId" type="hidden" name="itemId"/>
    <div class="user-shop-message col-md-12">
        <div class="user-shop-name">商品名称</div>
        <input type="text" id="title" name="title" placeholder="商品名称"/>
    </div>

    <div class="user-shop-message col-md-12">
        <div class="user-shop-name">商品价格</div>
        <input type="text" id="price" name="price" placeholder="商品价格"/>
    </div>

    <div class="user-shop-message col-md-12">
        <div class="user-shop-name">所属类目</div>
        <select class="houtai-item-catlist">
            <option value="">--请选择所属类目--</option>
        </select>
    </div>
    <div class="user-shop-message col-md-12">
            <div class="user-shop-name">商品规格</div>
            <input type="text" id="sizeIds" name="sizeIds" placeholder="商品规格，通过英文逗号隔开;格式例如:红色,绿色,蓝色,黑色"/>
    </div>

    <div class="user-shop-img-houtai col-md-12">
        <div class="user-shop-name">商品图片</div>
        <div class="shoplogo">
            <img src="/img/default.jpg"/>
        </div>
        <div class="img-button">
            <button type="button" class="btn btn-danger logoclick">修改图片</button>
            <input id="logoPic" name="image" type="file" class="hidden-val"/>
        </div>
    </div>

    <div class="user-shop-img-houtai col-md-12">
        <div class="user-shop-name">商品横幅</div>
        <div class="shopbanner">
            <img src="/img/default-banner.jpg"/>
        </div>
        <div class="img-button">
            <button type="button" class="btn btn-danger bannerclick">修改横幅</button>
            <input id="shopbanner" name="banner" type="file" class="hidden-val">
        </div>
    </div>

    <div class="user-shop-message col-md-12">
        <div class="user-shop-name">商品描述</div>
        <textarea type="text" id="desc" name="itemDesc" placeholder="商品描述" maxlength="200"></textarea>
    </div>
    </form>
</div>
<div class="shopmsg">
    <button id="submit" class="btn btn-success">保存商品</button>
</div>
<script type="text/javascript">

    $(function (){
        doGetCats();
        $("#submit").click(function (){
            doEditItem();
        });
    });

    $(".bannerclick").click(function (){
        $("#shopbanner").click();
    });
    $("#shopbanner").change(function (){
        let img = this.files;
        if(img.length==0){
            return ;
        }
        $(".shopbanner").empty();
        $(".shopbanner").append(domakebanner(img[0]));
    });
    function domakebanner(imgUrl){
        let reader = new FileReader();
        reader.readAsDataURL(imgUrl);
        reader.onload = function (){
            $(".shopbanner").append(`<img src="${reader.result}" name="image"/>`);
        }
    }
    $(".logoclick").click(function (){
        $("#logoPic").click();
    });
    $("#logoPic").change(function (){
        let img = this.files;
        if(img.length==0){
            return ;
        }
        $(".shoplogo").empty();
        $(".shoplogo").append(domakepic(img[0]));
    });
    function domakepic(imgUrl){
        let reader = new FileReader();
        reader.readAsDataURL(imgUrl);
        reader.onload = function (){
            $(".shoplogo").append(`<img src="${reader.result}" name="image"/>`);
        }
    }


    function doEditItem(){
        let reg=/(^[0-9]*(.[0-9]+)?)$/;
        if ($("input[type=text]").val()===null||$("input[type=text]").val()===''){
            alert("请填写信息!");
            return ;
        }
        if ($("select option:checked").val()===''||$("select option:checked").val()===null){
            alert("请选择类目!");
            return ;
        }
        if ($("#desc").val()===null||$("#desc").val()===''){
            console.log($("#desc").val());
            alert("请填写商品描述!");
            return ;
        }
        if ($("#desc").text().length>200){
            alert("描述太长!");
            return ;
        }
        if (!reg.test($("#price").val())){
            alert("价格输入有误..");
            return ;
        }
        let url;
        let itemData = $("#mainContentId").data("item");
        if (itemData) {
            url = `/shop/edit`;
        }else{
            url = `/shop/insert`;
        }
        let params = new FormData();
        let shop = $("#mainContentId").data("shop");
        let image = $("#logoPic").prop("files");
        let banner = $("#shopbanner").prop("files");
        params.append("itemId",$("#itemId").val());
        params.append("title",$("#title").val());
        params.append("price", $("#price").val());
        params.append("catId",$(".houtai-item-catlist option:checked").val());
        params.append("sizeIds",$("#sizeIds").val());
        params.append("image",image[0]);
        params.append("itemDesc",$("#desc").text());
        params.append("shopId",shop.shopId);
        params.append("banner",banner[0]);
        $.ajax({
            url:url,
            type:'POST',
            dataType:'json',
            data:params,
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success(result){
                if (result.status===200){
                    alert("保存成功!");
                }
                else {
                    alert(result.msg);
                }
            },
            error(){
                alert("保存失败!");
            }
        });
    }


    function doGetCats(){
        let url = `/shop/getCats`;
        $.getJSON(url,function (result){
            if (result.status===200){
                doLoadCats(result.data);
                doLoadEditPage();
            }
        });
    }
    function doLoadCats(cats){
        let catList = $(".houtai-item-catlist");
        for (let i in cats){
            let option = $(`<option name="catId" value="${cats[i].catId}">${cats[i].catName}</option>`);
            option.data("catId",cats[i].catId);
            catList.append(option);
        }
    }
    function doLoadEditPage(){
        let itemData = $("#mainContentId").data("item");
        if (itemData){
            $(".houtai-item-title").text("编辑商品");
            doLoadEditItem(itemData);
            doLoadItemCat(itemData);
        }
    }
    function doLoadItemCat(itemData){
        let catId = itemData.catId;
        let cats = $(".houtai-item-catlist").children();
        cats.each(function (){
            if(catId===$(this).data("catId")){
                $(this).attr("selected",true);
            }
        });
    }
    function doLoadEditItem(itemData){
        console.log(itemData);
        $("#itemId").val(itemData.itemId);
        $("#title").val(itemData.title);
        $("#price").val(itemData.price);
        $("#sizeIds").val(doLoadSizes(itemData.sizeList));
        $(".shoplogo").empty();
        $(".shopbanner").empty();
        $(".shoplogo").append(`<img src="${itemData.image}"/>`);
        $(".shopbanner").append(`<img src="${itemData.banner}"/>`);
        $("#desc").text(itemData.desc);
    }
    function doLoadSizes(sizeList){
        let sizeName;
        for (let i=0;i< sizeList.length;i++){
            if (i===0){
                sizeName=sizeList[i].sizeName;
                continue;
            }
            sizeName=sizeName+","+sizeList[i].sizeName;
        }
        return sizeName;
    }
</script>